<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>淘宝</title>
        <style>
            #box {
                width: 1200px;
                height: 615px;
                /* background-color: aqua; */
            }

            #t1 {
                font-size: 23px;
                font-family: 宋体;
                font-weight: 600;
            }
            #t1::after {
                content: "个性推荐";
                margin-left: 10px;
                font-size: 14px;
                color: white;
                background-color: #f98c00;
                border-radius: 4px;
                padding: 4px;
                font-family: 幼圆;
                font-weight: 500;
            }
            .elem {
                float: left;
                width: 377px;
                height: 175px;
                background-color: #f7f9fa;
                margin: 10px;
                margin-top: 1px;
                margin-bottom: 20px;
                border-radius: 10px;
                box-sizing: border-box;
                padding-left: 12px;
                padding-top: 13px;
            }
            .elem:hover {
                border: 1px solid orange;
                background-color: #fff;
                box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.1);
            }
            img {
                float: left;
                margin-right: 12px;
            }
            .tips {
                background-color: white;
                color: #ff5000;
                border: 1px solid #ff5000;
                border-radius: 3px;
                font-size: 13px;
                padding: 2px;
                position: relative;
                top: -8px;
            }
            .val {
                font-size: 22px;
                color: #ff5000;
                position: relative;
                top: 39px;
                left: -59px;
            }
            .val::before {
                content: "￥";
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <p id="t1">猜你喜欢</p>
            <div id="box1" class="elem">
                <img src="./elem1.jpg" alt="" />
                <p class="elem_p">AMD 锐龙R5 5600G散片R7 5800X 3D 5700盒装R9</p>
                <span class="tips">3期免息</span>
                <span class="val">391</span>
            </div>
            <div id="box2" class="elem">
                <img src="./elem2.jpg" alt="" />
                <p class="elem_p">Denon/天龙 AVR-X250BT家庭影院5.1声道4K杜比</p>
                <span class="tips">3期免息</span>
                <span class="val">1870</span>
            </div>
            <div id="box3" class="elem">
                <img src="./elem2.jpg" alt="" />
                <p class="elem_p">双十一享12期免息荣耀V Purse 钱包折叠屏5G</p>
                <span class="tips">3期免息</span>
                <span class="val">5999</span>
            </div>
            <div id="box4" class="elem"></div>
            <div id="box5" class="elem"></div>
            <div id="box6" class="elem"></div>
            <div id="box7" class="elem"></div>
            <div id="box8" class="elem"></div>
            <div id="box9" class="elem"></div>
        </div>
    </body>
</html>
